<div class="page-sidebar navbar-collapse collapse">
    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
        <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"
            ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}">
            <li class="sidebar-toggler-wrapper">
                <div class="sidebar-toggler"></div>
            </li>
            <li ng-repeat="firstMenu in sidebarMenus" ng-class="{'nav-item':true,'start':$first}">
                <a ng-href="{{firstMenu.href}}"
                   ng-class="{'nav-link':hasSubMenus(firstMenu.subMenus),'nav-toggle':hasSubMenus(firstMenu.subMenus)}">
                    <i class="{{firstMenu.className}}"></i>
                    <span class="title" ng-bind="firstMenu.title"></span>
                    <span ng-if="hasSubMenus(firstMenu.subMenus)" class="arrow"></span>
                </a>
                <ul ng-if="hasSubMenus(firstMenu.subMenus)" class="sub-menu">
                    <li ng-repeat="secondMenu in firstMenu.subMenus"
                        ng-class="{'nav-item':hasSubMenus(secondMenu.subMenus)}">
                        <a ng-href="{{secondMenu.href}}"
                           ng-class="{'nav-link':hasSubMenus(secondMenu.subMenus),'nav-toggle':hasSubMenus(secondMenu.subMenus)}">
                            <i class="{{secondMenu.className}}"></i>
                            <span class="title">{{secondMenu.title}}</span>
                            <span ng-if="hasSubMenus(secondMenu.subMenus)" class="arrow"></span>
                        </a>
                        <ul ng-if="hasSubMenus(secondMenu.subMenus)" class="sub-menu">
                            <li ng-repeat="thirdMenu in secondMenu.subMenus" ng-class="{'nav-item':hasSubMenus(thirdMenu.subMenus)}">
                                <a ng-href="{{thirdMenu.href}}"
                                   ng-class="{'nav-link':hasSubMenus(thirdMenu.subMenus),'nav-toggle':hasSubMenus(thirdMenu.subMenus)}">
                                    <i class="{{thirdMenu.className}}"></i>
                                    <span class="title">{{thirdMenu.title}}</span>
                                    <span ng-if="hasSubMenus(thirdMenu.subMenus)" class="arrow"></span>
                                </a>
                                <ul ng-if="hasSubMenus(thirdMenu.subMenus)" class="sub-menu">
                                    <li ng-repeat="fourthMenu in thirdMenu.subMenus">
                                        <a ng-href="{{fourthMenu.href}}">
                                            <i class="{{fourthMenu.className}}"></i>
                                            <span class="title">{{fourthMenu.title}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="slimScrollBar" style="background: rgb(161, 178, 189); width: 7px; position: absolute; top: 0px; opacity: 0.3; border-radius: 7px; z-index: 99; right: 1px; height: 579px; display: none;">
        </div>
        <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
        </div>
    </div>
</div>

